<template>
  <div class="home">
    <el-card shadow="never">
      <!-- 导航部分 -->
      <el-row>
        <el-col :span="24"
          ><div id="div11" class="grid-content bg-purple-dark">
            <span>优惠券</span>
          </div>
        </el-col>
      </el-row>
      <!-- 名称标题 -->
      <div id="div2">
        <el-row>
          <el-col :span="24"> <div id="name">优惠券添加编辑</div></el-col>
        </el-row>
      </div>

      <div id="div3">
        <el-form
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          label-width="150px"
          class="demo-ruleForm"
        >
          <!-- 优惠券名称 -->
          <el-form-item label="优惠券名称" prop="name">
            <el-input
              class="inputcontent"
              v-model="ruleForm.name"
              placeholder="请输入优惠券名称"
            ></el-input>
          </el-form-item>

          <!-- 面额 -->
          <el-form-item label="面额" prop="miane">
            <el-input
              class="inputcontent"
              v-model="ruleForm.face"
              placeholder="请输入面额抵扣金额"
            ></el-input>
          </el-form-item>
          <!-- 发放数量 -->
          <el-form-item label="发放数量" prop="sendnumber">
            <el-input
              class="inputcontent"
              v-model="ruleForm.count"
              placeholder="请输入优惠券发放总数量"
            ></el-input>
          </el-form-item>
          <!-- 每人可领数量 -->
          <el-form-item label="每人可领数量" prop="onegetnum">
            <el-input
              class="inputcontent"
              v-model="ruleForm.personCounts"
              placeholder="请输入单用户可领取的张数"
            ></el-input>
          </el-form-item>
        </el-form>
        <!-- 活动时间 -->
        <el-form :inline="true" class="form2" :model="ruleForm">
          <el-form-item label="活动时间">
            <el-input
              v-model="ruleForm.startTime"
              class="input2"
              placeholder="2021-05-06 00：00：00"
            ></el-input>
          </el-form-item>
          <el-form-item label="----" class="form-item">
            <el-input
              v-model="ruleForm.endTime"
              class="input2"
              placeholder="2021-05-06 00：00：00"
            ></el-input>
          </el-form-item>
        </el-form>

        <!-- 页面表格部分的开始 -->
        <div id="table">
            <!-- <el-table @select="delall"> -->
          <thead class="thead">
            <span id="span">支持课程</span>

            <!-- 添加课程按钮 -->
            <el-popover
              placement="right"
              width="650"
              trigger="click"
              v-model="visible"
            >
              <!-- 弹出框里面的表格的上面部分 -->
              <div class="search-box">
                <el-form>
                  <el-row>
                    <el-col :span="10"
                      ><el-input
                        v-model="coursenameSelect"
                        placeholder="课程名称"
                      ></el-input
                    ></el-col>
                    <el-col :offset="1" :span="10">
                      <!--查询按钮 -->
                    </el-col>
                    <el-col :span="3">
                      <el-button
                        id="but3"
                        type="primary"
                        @click="coursenameSelectM"
                        >查询</el-button
                      >
                    </el-col>
                  </el-row>
                </el-form>
              </div>
              <!-- 弹出框里面的表格部分 -->
              <el-table
                :data="gridData"
                ref="multipleTable"
                @select="changeRow"
              >
                <el-table-column type="selection" width="55"></el-table-column>
                <el-table-column
                  width="150"
                  prop="ename"
                  label="课程名称"
                ></el-table-column>
                <el-table-column
                  width="100"
                  prop="cname"
                  label="教练"
                ></el-table-column>
                <el-table-column
                  width="300"
                  prop="vname"
                  label="支持场馆"
                ></el-table-column>
              </el-table>
              <!--弹出框里面放页面的部分 -->
              <div class="yeshu">
                <el-pagination
                  background
                  layout="prev, pager, next"
                  :page-size="limit"
                  :total="50"
                  @current-change="change"
                  @prev-click="prev"
                  @next-click="next"
                >
                </el-pagination>

                <!-- 弹出框里面的取消与保存按钮 -->
                <p class="alertButton">
                  <el-button
                    type="primary"
                    slot="reference"
                    @click="visible = false"
                    >取消</el-button
                  >
                  <el-button type="primary" slot="reference" @click="save"
                    >保存</el-button
                  >
                </p>
              </div>

              <!-- 添加课程按钮 -->
              <el-button
                id="button3"
                type="primary"
                slot="reference"
                @click="addcourse"
                >添加课程</el-button
              >
            </el-popover>
          </thead>

          <!-- 表中间的部分 -->
          <tbody>
            <el-table :data="tableData" border style="width: 100%">
              <el-table-column type="selection" width="100"> </el-table-column>

              <el-table-column fixed prop="cname" label="课程名称" width="200">
              </el-table-column>
              <el-table-column prop="ename" label="教练" width="150">
              </el-table-column>
              <el-table-column prop="vname" label="支持场馆" width="150">
              </el-table-column>

              <el-table-column fixed="right" label="操作" width="150">
                <template slot-scope="scope">
                  <el-button @click.native.prevent="del(scope.$index, tableData)"  type="text" size="small"
                    >删除</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
          </tbody>

          <!-- 表尾 -->
          <tfoot>
            <div id="div3" style="margin-top: 20px">
              <el-row>
                <el-col :span="16">
                </el-col>
                <el-col :span="8"
                  ></el-col>
                <p class="sendsave">
                  <el-button type="primary" class="sendsaveBut" @click="send"
                    >完成，提交保存</el-button
                  >
                </p>
              </el-row>
            </div>
          </tfoot>
          <!-- </el-table> -->
        </div>
      </div>
    </el-card>
  </div>
</template>
<style scoped>
.search-box {
  padding-bottom: 20px;
}
.el-col #div11 {
  position: relative;
  height: 50px;
}
.bg-purple-dark {
  background: #606266;
}
#div11 > span {
  display: block;
  position: absolute;
  float: left;
  margin-left: 20px;
  margin-top: 10px;
  font-weight: bold;
  font-size: 24px;
  color: #adadad;
}
.bg-purple {
  background: #d3dce6;
  text-align: left;
}
#name {
  margin-top: 20px;
  position: absolute;
  left: 20px;
  color: #adadad;
  font-size: 20px;
}
#div3 {
  margin-top: 50px;
  text-align: left;
  margin-left: 100px;
}

.input1 {
  width: 200px;
  left: 30px;
}
.input2 {
  width: 200px;
}

#button3 {
  margin-left: 30px;
}

#item1 {
  width: 30px;
}
#item2 {
  width: 50px;
}
#item3 {
  width: 50px;
}
#but3 {
  width: 90px;
}
.yeshu {
  margin-left: 240px;
}
.inputcontent {
  width: 400px;
}
.alertButton {
  text-align: right;
}
.sendsave {
  text-align: center;
}
.sendsaveBut {
  width: 200px;
  height: 50px;
  margin-left: 100px;
}
</style>
<script>
export default {
  data() {
    return {
      id: window.sessionStorage.getItem("id"), //前面编辑传过来的id
      ids: [], //放添加的数据的ids
      row: [], //选中的行
      visible: false, //弹出框是否显示
      coursenameSelect: "", //课程名称搜索
      page: 1, //当前页面
      limit: 5, //每页展示的条数
      searchOptionValue: "",
      multipleTable: [],
      // 全选下拉列表
      optionList: [
        { value: 1, lable: "1" },
        { value: 2, lable: "2" },
        { value: 3, lable: "3" },
        { value: 4, lable: "4" },
      ],
      gridData: [],

      tableData: [],

      ruleForm: {
        name: "",
        face: "",
        count: "",
        personCounts: "",
        startTime: "",
        endTime: "",
      },
      rules: {
        name: [{ required: true, message: "请输入活动名称", trigger: "blur" }],
        region: [
          { required: true, message: "请选择活动区域", trigger: "change" },
        ],
        date1: [
          {
            type: "date",
            required: true,
            message: "请选择日期",
            trigger: "change",
          },
        ],
        date2: [
          {
            type: "date",
            required: true,
            message: "请选择时间",
            trigger: "change",
          },
        ],
        type: [
          {
            type: "array",
            required: true,
            message: "请至少选择一个活动性质",
            trigger: "change",
          },
        ],
        resource: [
          { required: true, message: "请选择活动资源", trigger: "change" },
        ],
        desc: [{ required: true, message: "请填写活动形式", trigger: "blur" }],
      },
      addcourseData: [],
    };
  },
  mounted() {
    this.getCon();
  },
  methods: {
    //完成，提交保存事件
    send() {
      this.$axios({
        url: "/gym/coupon/add",
        method: "post",
        data: {
          name: this.ruleForm.name,
          face: this.ruleForm.face,
          count: this.ruleForm.count,
          personCount: this.ruleForm.personCount,
          startTime: this.ruleForm.startTime,
          endTime: this.ruleForm.endTime,
          coursesSchedulingIds: this.ids,
        },
      }).then((res) => {
        if (res.data.error) {
          this.$message.error("添加失败！");
        } else {
          this.$message.success("添加成功！");
        }
      });
    },
   
    //添加课程里保存有关的
    changeRow(row) {
      this.row = row;
      this.ids.push(row[0].id) ;
    },

    //添加课程里的保存
    save() {
      this.tableData = this.row;
      this.visible = false;
    },
    //添加课程里面的查询
    coursenameSelectM() {
      this.$axios({
        url: "/gym/coupon/listCourses",
        method: "post",
        data: {
          name: this.coursenameSelect,
          page: this.page,
          limit: this.limit,
        },
      }).then((res) => {
        if (res.data.error) {
          this.$message.error("页面查询失败");
        } else {
          this.$message.success("页面查询成功");
          this.gridData = res.data.data;
        }
      });
    },

    //添加课程里的页面显示
    addcourse() {
      this.$axios({
        url: "/gym/coupon/listCourses",
        method: "post",
        data: {
          page: this.page,
          limit: this.limit,
        },
      }).then((res) => {
        if (res.data.error) {
          this.$message.error("页面查询失败");
        } else {
          this.$message.success("页面查询成功");
          this.gridData = res.data.data;
        }
      });
    },
    //当前页面改变
    change(page) {
      this.page = page;
      this.getCon();
    },
    //页面++
    next() {
      this.page++;
      this.getCon();
    },
    //页面--
    prev() {
      this.page--;
      this.getCon();
    },

    //页面挂载时渲染页面
    mounted() {
      this.getCon();
    },
    //描绘页面
    getCon() {
      //    console.log(window.sessionStorage.getItem("id"))
      this.$axios({
        url: "/gym/coupon/find",
        method: "post",
        data: {
          id: this.id,
        },
      }).then((res) => {
        if (res.data.code != 200) {
          this.$message.error("显示失败");
        } else {
          //成功之后
          //表单数据直接获取对应的数据
          this.ruleForm = res.data.data;
          console.log(this.ruleForm);
          //获取对应的表单的数据
          this.$axios({
            url: "/gym/coupon/selectedListCourses",
            method: "post",
            data: {
              page: this.page,
              limit: this.limit,
              couponId: this.id,
            },
          }).then((res) => {
            if (res.data.error) {
              this.$message.error("显示失败");
            } else {
              this.$message.success("显示成功");
              this.tableData = res.data.data;
            }
          });
        }
      });
    },

    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert("submit!");
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },

//表格里的删除事件
    del(index,rows) {
    rows.splice(index, 1);
    },


  },
};
</script>
